<template>
  <div>
    <q-expansion-item
      :header-inset-level="calcLevel"
      v-for="menu in menuList"
      :key="menu.path"
      :icon="menu.icon"
      :label="menu.name"
      :header-style="headerStyleActive(menu)"
      :value="openMenu(menu)"
      :expand-icon-class="menu.children?'':'hide-icon'"
      :group="menu.path"
      @click="go(menu)"
      :content-inset-level="calcContent"
      class="cc-none-select"
    >
      <base-menu-item
        v-if="menu.children"
        :menuList="menu.children"
        :level="level+1"
        :navList.sync="navList"
      />
    </q-expansion-item>
  </div>
</template>

<script>
import { openURL } from 'quasar';

export default {
  name: 'base-menu-item',
  components: {},
  props: {
    menuList: Array,
    level: Number,
    navList: Array,
  },
  data() {
    return {
    };
  },
  watch: {},
  computed: {
    calcLevel() {
      if (this.level < 2) {
        return 0;
      }
      return 1;
    },
    calcContent() {
      return this.level * 0.4;
    },
  },
  methods: {
    go(u) {
      if (u.children) {
        return;
      }
      if (u.internalOrExternal) {
        openURL(u.path);
      } else if (u.path !== this.$route.path) {
        this.$router.replace(u);
      }
    },
    headerStyleActive(item) {
      if (this.$route.path === item.path && item.path !== '/home') {
        return {
          color: '#1890ff',
          backgroundColor: '#e6f7ff',
        };
      }
      if (this.$route.path.startsWith(item.path)) {
        return {
          color: '#1890ff',
        };
      }

      return {};
    },
    openMenu(item) {
      if (this.$route.path.startsWith(item.path)) {
        return true;
      }
      return false;
    },
    itemStyleActive(item) {
      if (item.path === this.$route.path) {
        return {
          color: '#1890ff',
          backgroundColor: '#e6f7ff',
          borderRight: '0.2em solid #1890ff',
        };
      }
      return {};
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="stylus">
.hide-icon
  display none
</style>
